<template>
  <div>
    <div class="SequenceLi" v-for="(li, liindex) in list" :key="liindex">
      <h3 v-if="li.MacSNs.length > 0">
        {{ li.groupname }}
        <span>
          <a>{{ li.inlinenumone }}</a>
          /{{ li.allnumonr }}
        </span>
      </h3>
      <a-row type="flex" justify="start" :gutter="16">
        <a-col :xs="20" :sm="24" :md="24" :lg="12" :xl="12" :xxl="8" v-for="(item, index) in li.MacSNs" :key="index">
          <div
            class="Sequence-one "
            :style="{ 'background-color': params && backgrounOn(item.macsn, item.macnum) ? '#a8d3f3' : '' }"
          >
            <img :src="item.url ? imgurl + item.url : defultimg" alt="" :onerror="onerrorimg" />
            <div class="Sequence-oneRight">
              <div class="Sequence-oneRighttype" :style="{ color: runStateOptioncolor(item.runstate, 1) }">
                <span>
                  <a-icon
                    class="icon"
                    :type="runStateOptioncolor(item.runstate, 2)"
                    theme="filled"
                    :style="{ color: runStateOptioncolor(item.runstate, 1) }"
                  />
                </span>
                {{ runStateOptioncolor(item.runstate, 3) }}
              </div>
              <p>
                <span>设备编号：</span>
                {{ item.macnum }}
              </p>
              <p>
                <span>设备型号：</span>
                {{ item.mactype }}
              </p>
              <p>
                <span>设备类型：</span>
                {{ item.macname }}
              </p>
              <p>
                <!-- <span v-if="isRegisterHandle(item.isRegister)">累计加工：</span>
                <span v-else>今日加工：</span>
                {{ item.count }} -->
                <span>今日加工：</span>
                {{ getCountNum(item.macsn) }}
              </p>
            </div>
            <p class="lookdetail" @click="lookDetail(item, li.groupid)">查看详情</p>
            <div class="countWarning" v-if="showCountWarning(item.count)">当前累计件数为{{item.count}}, 已超过上限, 请在系统端进行重置</div>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
//<a-icon type="exclamation-circle" /><a-icon type="close-circle" />
let thecolor = [
  { icon: 'check-circle', color: '#2FB818', name: '运行', value: 1000 },
  { icon: 'exclamation-circle', color: '#D65B4A', name: '报警', value: 2000 },
  { icon: 'minus-circle', color: '#FBC225', name: '待机', value: 3000 },
  { icon: 'close-circle', color: '#68768C', name: '离线', value: 4000 },
  { icon: 'close-circle', color: '#68768C', name: '离线', value: '' },
];
// let list=[{name:"01",type:0},{name:"01",type:1},{name:"01",type:2},{name:"01",type:3}]
import api from '@/api/equipment';

export default {
  name: 'listSequence',
  props: {
    list: {
      type: Array,
      default: () => [],
    },
    params: {
      type: String,
      default: null,
    },
  },
  watch: {
    list: {
      deep: true,
      handler(val) {
        this.dataHandler(val)
        return val;
      },
    },
  },
  filter() {},
  data() {
    return {
      thecolor: thecolor,
      imgurl: '',
      defultimg: require('@images/defaultImg.png'),
      // list:list
      onerrorimg: 'this.src="' + require('@images/defaultImg.png') + '"',
      countList: [],
    };
  },
  created() {
    this.imgurl = this.$pictureUrl;
  },
  methods: {
    showCountWarning(count) {
      return parseInt(count) >= 2147483647
    },
    backgrounOn(sn, num) {
      let index = false;
      let numflag = false;
      index = sn.indexOf(this.params) >= 0 ? true : false;
      numflag = num.indexOf(this.params) >= 0 ? true : false;
      return index || numflag;
    },

    lookDetail(item, groupid) {
      this.$store.commit('board/DetailType', 5);
      localStorage.setItem('DetailType', 5);
      // let routeData = this.$router.resolve({
      //   path: "/deviceDetail",
      //   query: { macsn: item.macsn,groupid:groupid },
      // });
      // window.open(routeData.href, "_blank");

      let routeData = this.$router.push({
        path: '/deviceDetail',
        query: { macsn: item.macsn, groupid: groupid },
      });
    },
    runStateOptioncolor(val, type) {
      let opt = thecolor.find((item) => item.value == val);
      if (type == 1) {
        return opt ? opt.color : '';
      } else if (type == 2) {
        return opt ? opt.icon : '';
      } else if (type == 3) {
        return opt ? opt.name : '';
      }
    },
    isRegisterHandle(val) {
      return parseInt(val) == 1;
    },
    dataHandler(val) {
      let macsnList = []
      for(let item of val) {
        for(let bItem of item.MacSNs) {
          macsnList.push(bItem.macsn)
        }
      }

      let chunk = 10;
      let len = macsnList.length;
      let result = [];
      for (let i = 0; i < len; i += chunk) {
        result.push(macsnList.slice(i, i + chunk))       
      }
      
      this.countList = []
      result.forEach((item) => {
          let params = {
            macSNList: item,
          }
          this.getAllDayPnt(params)
      })
    },
    // 获取加工计件数
    async getAllDayPnt(params) {
      const res = await api.getAllDayPnt(params);
      let data = res.Data.macSNData
      for(let key in data) {
        this.countList.push(
          {
            name: key,
            value: data[key]
          }
        )
      }
    },
    // 查询
    getCountNum(e) {
        let countNum = 0
        this.countList.forEach((item) => {
            if(item.name == e) {
              countNum = item.value
            }
        })
        return countNum
    },
  },
};
</script>

<style scoped lang="less">
@import 'style.less';
</style>
